<template>
  <el-dialog
    title="订票信息"
    :before-close="close"
    :visible.sync="order_status"
    width="400px"
    append-to-body
  >
    <el-form ref="form" :model="order_detail" label-width="80px">
      <el-form-item label="航班名称">
        <el-input
          v-model="order_detail.flight_name.name"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="起点">
        <el-input v-model="order_detail.from_place" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="终点">
        <el-input v-model="order_detail.to_place" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="出发时间">
        <el-input v-model="order_detail.start_time" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="舱位类型">
        <el-select v-model="order_detail.class_type" placeholder="请选择舱位">
          <el-option label="头等舱" value="0"></el-option>
          <el-option label="经济舱" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="价格">
        <el-input
          v-if="order_detail.class_type == 0"
          v-model="order_detail.first_class_price"
          :disabled="true"
        ></el-input>
        <el-input
          v-if="order_detail.class_type == 1"
          v-model="order_detail.economy_class_price"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="座位号">
        <el-input v-model="order_detail.seat_number" :disabled="true" placeholder="由管理员选定"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reserve">立即预定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import request from "../../request/http";
import { mapState } from "vuex";

import qs from "qs";
export default {
  name: "order",
  data() {
    return {};
  },
  props: ["order_status", "order_detail"],
  computed: {
    ...mapState({
      userid: (state) => state.user_id,
      name: (state) => state.name,
    }),
  },
  methods: {
    // 点击预定
    reserve() {
      if (!this.order_detail.class_type) {
        this.$message.error("请先选择舱位类型");
        return;
      }
      this.order_detail.user_id = this.userid;
      this.order_detail.name = this.name;
      this.order_detail.flight_id = this.order_detail.id;
      request({
        url: "/booked/booking-flight/",
        method: "post",
        data: qs.stringify(this.order_detail),
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("预定成功");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    cancel() {
      this.$store.commit("click_order", false);
    },
    close() {
      this.$store.commit("click_order", false);
    },
  },
  created() {},
};
</script>

<style scoped></style>
